<template>
  <div class="assistant-management">
    <h2>{{ $t('message.assistantPanel') }}</h2>
    <p>{{ $t('message.welcomeAssistant') }}</p>
    
    <el-tabs v-model="activeTab">
      <el-tab-pane :label="$t('message.teachers')" name="teachers">
        <div class="tab-content">
          <TeacherManagement />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.messages')" name="messages">
        <div class="tab-content">
          <MessageManagement />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.youbiRecords')" name="youbi">
        <div class="tab-content">
          <YoubiManagement />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref } from 'vue';
import TeacherManagement from '@/components/assistant/TeacherManagement.vue';
import MessageManagement from '@/components/admin/MessageManagement.vue';
import YoubiManagement from '@/components/admin/YoubiManagement.vue';

export default {
  name: 'AssistantManagement',
  components: {
    TeacherManagement,
    MessageManagement,
    YoubiManagement
  },
  setup() {
    const activeTab = ref('teachers');

    return {
      activeTab
    };
  }
};
</script>

<style scoped>
.assistant-management {
  padding: 20px;
}

.tab-content {
  margin-top: 20px;
}
</style>